<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后台首页</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="{{ url_for('static',filename='css/plot.css')}}">
		<!-- 引入组件库 -->
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script type="text/javascript" src="{{ url_for('static',filename='js/jquery.min.js') }}"></script>
		<script src="{{ url_for('static',filename='js/vue.js')}}"></script>
		<script src="{{ url_for('static',filename='js/vue-router.js')}}"></script>
        <script src="{{ url_for('static',filename='js/ele.js')}}"></script>
		<script src="{{ url_for('static',filename='js/plot.js')}}"></script>
		<script src="{{ url_for('static',filename='js/echarts.js')}}"></script>
		<script src="{{ url_for('static',filename='js/theme.js')}}"></script>
		<!-- <script type="text/javascript" src="js/china.js"></script> -->
		<script src="../../static/js/liMarquee.js"></script>
        {% block link %}
        {% endblock %}
	</head>
	<style>
		.el-header {
			line-height: 60px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #409EFF;
		}
		/* .el-menu{
			height: 100vh;
		} */

		/* .el-aside {
			border: none;
			color: "#545c64";
			background-color:"#545c64"; 
			margin-right: 3px; 
		} */
		.el-aside {
		display: block;
		position: relative;
		overflow-y: scroll;
		background-color: #545c64 !important;
		min-width: 12%;
		}

		.el-submenu .el-menu-item {
			min-width: 12%;
		}
        {% block style %}
        {% endblock %}
	</style>
	<body>
    <div id="app">
        <el-container>
			<el-aside style="width: 12%;">
			<el-menu background-color="#545c64" text-color="#fff"
					 active-text-color="#ffd04b" @select="url_to"
					 :default-openeds={{default_open}}>
				<el-submenu index="1">
					<template slot="title"><i class="el-icon-location-outline"></i>数据可视化</template>
					<el-menu-item-group>
						<template slot="title">游戏</template>
						<el-menu-item index='game_display'>游戏充值数据</el-menu-item>
						<el-menu-item index='game_user'>游戏用户数据</el-menu-item>
						<el-menu-item index="game_rank">游戏天梯榜</el-menu-item>
                        <el-menu-item index="game_similarity">游戏相似度分析</el-menu-item>
					</el-menu-item-group>
					<el-menu-item-group>
						<template slot="title">用户</template>
						<el-menu-item index="user_like">用户喜爱度</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="2">
					<template slot="title"><i class="el-icon-location-outline"></i>个性化推荐</template>
					<el-menu-item index='user_center'>用户画像</el-menu-item>
					<el-menu-item index="recommend">个性化推荐</el-menu-item>
				</el-submenu>
				<el-submenu index="3">
					<template slot="title"><i class="el-icon-location-outline"></i>导航三</template>
				</el-submenu>
				<el-submenu index="4">
					<template slot="title"><i class="el-icon-location-outline"></i>导航四</template>
				</el-submenu>
			</el-menu>
			</el-aside>
            <el-container style='height: 100vh;'>
                <el-main>
                    {% block main %}
                    {% endblock %}
                </el-main>
            </el-container>
        </el-container>
    </div>
	</body>
	<script>
		$(function() {
			$('.wrap').liMarquee({
				direction: 'up', //身上滚动
				runshort: false, //内容不足时不滚动
				scrollamount: 20 //速度
			});
		});
	</script>
    <!-- <script type="text/javascript">
		$(document).ready(function() {
			myChart1.resize();
			myChart2.resize();
			myChart3.resize();
			// myChart.resize();

		})
		window.addEventListener("resize", function() {
			myChart1.resize();
			myChart2.resize();
			myChart3.resize();
			// myChart.resize();
		});
	</script> -->
	<script type="text/javascript">
		let app = new Vue({
			delimiters:["[[","]]"],
			el: '#app',
			data:{
				ruleForm:{
                  name: '',
                  region: '',
                  date1: '',
                  date2: '',
                  delivery: false,
                  type: [],
                  resource: '',
                  desc: ''
                },
                rules:{
                  name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                  ],
                  region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                  ],
                  date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                  ],
                  date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                  ],
                  type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                  ],
                  resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                  ],
                  desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                  ]
                },
				options:[{
					value:'01',
					label:'一月',
				},{
					value:'02',
					label:'二月',
				},{
					value:'03',
					label:'三月',
				},{
					value:'04',
					label:'四月',
				},{
					value:'05',
					label:'五月',
				},{
					value:'06',
					label:'六月',
				},{
					value:'07',
					label:'七月',
				},{
					value:'08',
					label:'八月',
				},{
					value:'09',
					label:'九月',
				},{
					value:'10',
					label:'十月',
				},{
					value:'11',
					label:'十一月',
				},{
					value:'12',
					label:'十二月',
				},
				],
				value:"12",
                tableData:[],
                play_data:[],
                charge_data:[],
                input_id:"",
                input_name:"",
                recommend_data:[],
			},
            methods:{
			    InputChange(params){
                },
			    handleClick(name){
                },
		        url_to(key,keyPath){
		            url = '/admin/'+key;
		            window.location.href = url;
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },
                choice(value){
                    if (value=='game'){
                        document.getElementById('game_select').style.display='block';
                    }
                    else {
                        document.getElementById('game_select').style.display='none';
                    }
                },
				change_month(value){
					get_echarts3(value);
				},
			}
		});
        {% block app %}
        {% endblock %}
	</script>
    {% block js %}
    {% endblock %}
</html>